<template>
  <div class="home">
    <!-- <div class="loading-mask" v-loading="loading"></div> -->
    <div class="box-top box-color">
      <div class="box-title">总览概况</div>
      <div class="echarts-main">
        <div class="echart-box box-flex1">
          <div style="text-align: center; width: 100%">
            <!-- <b>{{totle}}</b> -->
            <DigitalScrolling :num="totle" />
            <div>项目总数</div>
          </div>
        </div>
        <div class="echart-box box-flex2">
          <div style="display: flex">
            <div
              class="echart-box-inner"
              v-for="(item, index) in topTitleData.top1"
              :key="index"
            >
              <b>{{ item.value }}</b>
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div style="display: flex; margin-top: 10px">
            <div
              class="echart-box-inner"
              v-for="(item, index) in topTitleData.top2"
              :key="index"
            >
              <b>{{ item.value }}</b>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>项目里程碑</div>
        <!-- <div>
          <router-link :to="'project/milestone'">
            更多
            <i class="el-icon-d-arrow-right" />
          </router-link>
        </div>-->
        <Tips />
      </div>
      <ConstructionBox :listData="listDatas" />
    </el-card>
    <!-- <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>发起评审项目</div>
        <Tips />
      </div>
      <div class="box-tabs">
        <span :class="{'active':tabActive===1}" @click="tabsHandle(1)">5天内</span>
        <span :class="{'active':tabActive===2}" @click="tabsHandle(2)">7天内</span>
        <span :class="{'active':tabActive===3}" @click="tabsHandle(3)">14天内</span>
      </div>
      <ConstructionBox :listData="listDatas" />
    </el-card>-->
    <!-- <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>我的绩效</div>
      </div>
      <p>绩效系数：{{jx}}</p>
    </el-card>-->
  </div>
</template>

<script>
import Option from "@components/echarts-parts/echarts-option";
// import ConstructionBox from "../constructionBox/index";//原始list
import ConstructionBox from "../constructionBox/indexArrow"; //箭头list
import DigitalScrolling from "./digitalScrolling"; //数字滚动
import Tips from "../constructionBox/tips";
import { mapState } from "vuex";
import homeAPI from "@apis/home";
import { Loading } from "element-ui";

const optionLoading = {
  lock: true, // 是否锁屏
  background: "rgba(255, 255, 255, 0.7)", // 背景颜色
  target: ".home",
  body: true,
};
export default {
  data() {
    return {
      loading: false,
      totle: 0,
      topTitleData: [],
      uid: "", //用户id
      jx: 0.9, //绩效系数
      listDatas: [],
      tabActive: 1,
    };
  },
  components: {
    ConstructionBox,
    Tips,
    DigitalScrolling,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
  },
  created() {
    // is_admin=1是管理员获取所有数据，uid传空值即可
    // if (this.userInfo.user.is_admin != 1) {
    //   this.uid = this.userInfo.user.id;
    // } else {
    //   this.uid = "";
    // }
    this.uid = "";
    this.getList();
    this.getEchartsData();
  },
  mounted() {},
  methods: {
    getList() {
      let loadingInstance = Loading.service(optionLoading);
      // this.loading = true;
      homeAPI
        .getHomeList(this.uid)
        .then((res) => {
          this.listDatas = [...res.list];
          // console.log(res,"resHOme")
          loadingInstance.close();
          // this.loading = false;
        })
        .catch((err) => {
          this.listDatas = [];
          loadingInstance.close();
          if (err.data.code) {
            this.$message.error(err.message);
          }
          // this.loading = false;
        });
    },
    getEchartsData() {
      homeAPI
        .allprojectTip(this.uid)
        .then((res) => {
          this.totle = res.projectTotal;
          this.topTitleData = {
            top1: [
              {
                name: "在建项目数",
                value: res.building,
              },
              {
                name: "暂停项目数",
                value: res.stop,
              },
              {
                name: "维护项目数",
                value: res.save,
              },
            ],
            top2: [
              {
                name: "结束项目数",
                value: res.finished,
              },
              {
                name: "未开始的项目数",
                value: res.notstart,
              },
              {
                name: "项目异常数",
                value: res.unnomral,
              },
            ],
          };
        })
        .catch((err) => {
          this.totle = 0;
          this.topTitleData = { top1: [], top2: [] };
          this.$message.error(err.message);
        });
    },
    tabsHandle(data) {
      this.tabActive = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-top {
  padding: 20px;
  .echarts-main {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;

    .echart-box {
      text-align: center;
      display: inline-block;
      border-right: 1px solid #ddd;
      &:last-child {
        border-right: none;
      }
      b {
        font-size: 60px;
      }
      div {
        font-size: 17px;
        height: 70px;
      }
    }
    .echart-box-inner {
      flex: 1;
      text-align: center;
      display: inline-block;
      border-right: 1px solid #ddd;
      &:last-child {
        border-right: none;
      }
      b {
        font-size: 35px;
      }
      div {
        font-size: 14px;
      }
    }
    .box-flex1 {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .box-flex2 {
      flex: 3;
    }
  }
}
.box-construction {
  margin-top: 20px;
  min-height: 100px;
  .box-tabs {
    margin-top: 20px;
    background: #eef1f6;
    border: 1px solid #dcdfe6;
    span {
      display: inline-block;
      padding: 10px 20px;
      color: #909399;
      cursor: pointer;
      &.active {
        background: #fff;
        border-bottom: 1px solid transparent;
        margin-bottom: -1px;
        color: #409eff;
      }
      &:hover {
        color: #409eff;
      }
    }
  }
}
.box-title {
  div {
    float: left;
    &:nth-child(2),
    &:nth-child(3) {
      float: right;
    }
    &:nth-child(2) {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.6);
      padding-left: 15px;
      cursor: pointer;
    }
  }
}
</style>